---
const {
  title,
  img,
  desc,
  url,
  badge,
  pricing,
  oldPricing,
  checkoutUrl,
  details = true,
  custom_link = false,
  custom_link_label = "",
} = Astro.props;
import { Image } from "astro:assets";
---

<div class="rounded-lg bg-base-100 hover:shadow-xl transition ease-in-out hover:scale-[102%]">
  <a href={url}>
    <div class="hero-content flex-col md:flex-row">
      {
        img && (
          <Image
            width={750}
            height={422}
            format="webp"
            src={img}
            alt={title}
            class="max-w-full md:max-w-[13rem] rounded-lg"
          />
        )
      }
      <div class="grow w-full p-5 md:p-0">
        <h1 class="text-xl font-bold">
          {title}
          {badge && <div class="badge badge-secondary mx-2">{badge}</div>}
        </h1>
        <div>
          <span class="text-xl mr-1"> {pricing}</span>
          <span class="text-md opacity-50 line-through">{oldPricing}</span>
        </div>
        <p class="py-1 text-1xl">{desc}</p>
      </div>
    </div>
  </a>
</div>
